<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/index.css"/>
		<link rel="stylesheet" type="text/css" href="../css/style.css"/>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vant.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="html5plus://ready"></script>
		<script src="../js/back.js" type="text/javascript" charset="utf-8"></script>
		<title>注册用户</title>
		<script type="text/javascript">
			document.addEventListener('plusready', function() {
				//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"

			});
		</script>
		<style type="text/css">
			header {
				padding: 15px 20px 5px 20px;
				background-color: red;
				color: white;
				margin-top: 0px;
			}
			
			#form {
				margin-top: 10px;
				line-height: 32px;
				padding: 0px 20px 0px 20px;
			}
			
			#yzm {				
				border: 0px solid;
			}
			#phone{
				border: 0px;
			}
			#new-password1 {
				border: 0px solid;
			}
			
			#new-password2 {
				border: 0px solid;
			}
			
			#username {
				border: 0px solid;
			}
			
			#code {
				border: 0px solid;
			}
			
			hr {				
				border: 0.5px solid #E5E5E5;
			}
			
			#bottom-txt-style {
				text-align: center;
				margin-top: 10px;
			}
			
			#bootm-txt {
				font-size: 10px;
				/*控制最下面的文字*/
			}
			#zhuce{
				padding: 0px 15px 0px 15px;
				margin-top: 50px;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<header>
				<van-row>
					<van-col span="4">
						<span @click="goBack"><返回</span>
					</van-col>
							<van-col span="17">注册用户</van-col>
							<van-col span="3"></van-col>
				</van-row>
			</header>
			<!--头部结束-->

			<section>
				<div style="height: 13px; background-color: #E5E5E5;"></div>
				<van-row>
					<!--文本框开始-->
					<div id="form">
						<van-col span="24">
							<input type="text" name="" id="phone" value="" placeholder="手机号码" v-model="photo"/>
						</van-col>
						<hr/>
						<van-col span="16"><input type="text" name="" id="yzm" v-model="yzm" value="" placeholder="6位数字短信验证码" /></van-col>
						<van-col span="8">
							<van-button type="danger" @click="fsyzm">发送验证码</van-button>
						</van-col>
						<van-col span="24">
							<hr/>
						</van-col>
						<van-col span="24">
							<input name="" id="username" value="" v-model="name" placeholder="昵称（最多20个字）" />
						</van-col>
						<van-col span="24">
							<hr/>
						</van-col>
						<van-col span="24">
							<input type="password" name="" v-model="newpws" id="new-password1" value="" placeholder="登录密码（最少6位）" />
						</van-col>
						<van-col span="24">
							<hr/>
						</van-col>
						<van-col span="24">
							<input type="password" name="" v-model="newpws2" id="new-password2" value="" placeholder="确认密码" />
						</van-col>
						<van-col span="24">
							<hr/>
						</van-col>
						
						<van-col span="24">
							<input id="code" value="" placeholder="您的身份证号前六位" v-model="code" />
						</van-col>
						<van-col span="24">
							<hr/>
						</van-col>
					</div>
				</van-row>
				<!--文本框结束-->

				<div id="bottom-txt-style">				
					<!--下面的文字div开始-->
					<van-col span="24">
						<b id="bootm-txt">注册会员即表示同意<a href="#">《万众亚迅用户注册协议》</a></b>
					</van-col>
				</div>
				<!--下面的文字div结束-->
				
				<div id="zhuce"><!--立即注册按钮-->
					<van-button type="danger"  size="large" @click="zhuce">立即注册</van-button>
				</div>

			</section>

		</div>
		<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			var vm = new Vue({
				el: "#app",
				data: {
					photo:"",
					yzm:"",
					newpws:"",
					newpws2:"",
					name:"",
					code:""
				},
				methods:{
					goBack(){
						var arr=plus.webview.currentWebview();
						plus.webview.close(arr,"slide-out-right")
					},					
					fsyzm:function(){
						_this=this;
						var TEL_REGEXP = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
						if(TEL_REGEXP.test(vm.photo)){
							$.ajax({
								type:"post",
								url:"http://dsapi.ysd3g.com/API/SendRegisterPhoneCode",
								data:{
									phone:vm.photo								
								},
								dataType:"json",
								success:function(res){								
									if(res.Error==false){									
										console.log(res)
										vm.$toast("本次验证码为："+res.Code);
										vm.yzm=res.Code;
										// alert(res.Code);
									}else{
										console.log(res)
										_this.$toast(res.Msg);
									}
								}	
							})
						}else{
							vm.$toast.fail("请输入合法的手机号")
						}
						
					},
					
					
					zhuce:function(){
						_this=this;
						var newpws=vm.newpws;
						var newpws2=vm.newpws2;
						if(newpws!=newpws2){
							vm.$toast.fail("两次密码不一致");
							return;
						}
						$.ajax({
							type:"post",
							url:"http://dsapi.ysd3g.com/API/UserRegister",
							data:{
								phone:vm.photo,
								code:vm.yzm,
								password:vm.newpws,
								districtCode:vm.code,
								nickName:vm.name
							},
							dataType:"json",
							success:function(res){
								if(res.Error==false){									
									vm.$dialog.confirm({
									  title: '恭喜您注册成功',
									  message: '小的在此恭候大人多时了，点击确认立即登录'
									}).then(() => {
										plus.storage.setItem("key",res);
										var arr=plus.webview.currentWebview();
										plus.webview.close(arr,"slide-out-right");
									}).catch(() => {
									  vm.$toast("取消登录")
									});									
								}else{
									console.log(res)
									_this.$toast(res.Msg);
								}
							}	
						})
					}
				}
			})
		</script>
		
		
	</body>

</html>